<template>
  <div>
    <el-dialog title="商家详情" :visible.sync="dialogVisible" width="45%" :before-close="handleClose" top="5vh">
      <el-row>
        <el-col :span="12">
          <el-image style="width: 400px; height: 400px" :src="$baseUrl + info.goods_img" fit="cover"></el-image>
        </el-col>
        <el-col :span="12">
          <div class="goods_name">{{ info.goods_name }}</div>
          <el-descriptions :column="1" labelClassName="labelClassName" size="medium" :colon="false">
            <!-- <el-descriptions-item label=""></el-descriptions-item> -->
            <el-descriptions-item label="商品分类：">{{ info.category_name }}</el-descriptions-item>
            <el-descriptions-item label="商品价格：">
              <span class="red_color">￥{{ info.goods_price }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="商品优惠金额：">
              <span class="red_color" v-if="info.goods_preferential">￥{{ info.goods_preferential }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="商品描述：">{{ info.goods_desc }}</el-descriptions-item>
            <el-descriptions-item label="上下架状态：">
              <el-tag :type="info.listing_status == 1 ? 'success' : 'danger'">
                {{ info.listing_time ? '已上架' : '已下架' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上下架时间：">{{ info.listing_time }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>商品规格</h3>
          <el-table :data="specification_list" border>
            <el-table-column prop="specification_name" label="规格名称" align="center" width="200" />
            <el-table-column prop="specification_value" label="规格值" align="center">
              <template #default="{ row }">
                <el-tag v-for="(item, index) in row.specification_value" :key="index" type="warning" size="medium">
                  {{ deleteSymbol(item) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import { ids_get_specification_list } from '@/api/goods'
  export default {
    data() {
      return {
        dialogVisible: false,
        info: {},
        specification_list: [],
      }
    },
    methods: {
      open(row) {
        this.info = row
        console.log('row: ', row)
        this.get_specification_list(row.specification_ids)
        this.dialogVisible = true
      },
      async get_specification_list(specification_ids) {
        await ids_get_specification_list({ specification_ids }).then(({ data }) => {
          console.log('data: ', data)
          data.forEach((item) => {
            item.specification_value = item.specification_value.split(',')
          })
          this.specification_list = data
          console.log(' this.specification_list : ', this.specification_list)
        })
      },
      deleteSymbol(val) {
        if (!val.includes('|')) return val
        return val.replace(/\|/g, '￥')
      },
      handleClose() {
        this.info = {}
        this.dialogVisible = false
      },
    },
  }
</script>

<style scoped lang="scss">
  .goods_name {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .el-descriptions {
    // padding: 5px 20px;
    font-size: 15px;
    font-weight: 600 !important;
    color: #303133 !important;
  }

  .labelClassName {
    font-weight: 600 !important;
    width: 100px !important;
    color: red !important;
  }
  .red_color {
    color: red;
  }
</style>
